<template>
    <div class="box">
        <!-- <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
                prop="date"
                label="时间">
            </el-table-column>
            <el-table-column
                prop="name"
                label="中文名">
            </el-table-column>
            <el-table-column
                prop="pv"
                label="PV">
            </el-table-column>
            <el-table-column
                prop="uv"
                label="UV">
            </el-table-column>
        </el-table> -->
        <grid-layout ref="pagelayout" :layout.sync="$store.state.pageLayout"
            :col-num="12"
            :row-height="30"
            :is-draggable="true"
            :is-resizable="true"
            :vertical-compact="true"
            :use-css-transforms="true"
        >
            <grid-item :key="item.i" v-for="(item) in $store.state.pageLayout"
                :x="item.x"
                :y="item.y"
                :w="item.w"
                :h="item.h"
                :i="item.i"
            >
                <div class="head">
                    <p class="title">{{ item.config.name }}</p>
                    <!-- <div class="btnbox">
                        <i class="el-icon-s-tools delbtn" style="margin-right:5px;" @click="setting(item)"></i>
                        <i class="el-icon-error delbtn" @click="del(item.i)"></i>
                    </div> -->
                </div>
                <div class="main">
                    <Chart v-if="item.config" :config="item.config"/>
                </div>
            </grid-item>
        </grid-layout>
    </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue';

export default {
    name: 'Home',
    data(){
        return {
            fieldMap: {
                data: '时间',
                name: '中文名',
                code: '编码',
                pv: '点击量',
                uv: '访问量'
            },
            tableData: [
                { date: '2016-05-02', code: 'A-TP99', name: 'tp99', pv: 6754,uv: 43232},
                { date: '2016-05-03', code: 'A-TP99', name: 'tp99', pv: 6754,uv: 43232},
                { date: '2016-05-04', code: 'A-TP99', name: 'tp99', pv: 6754,uv: 43232},
                { date: '2016-05-05', code: 'A-TP99', name: 'tp99', pv: 6754,uv: 43232},
                { date: '2016-05-02', code: 'A-ABC', name: 'abc', pv: 6754,uv: 43232},
                { date: '2016-05-03', code: 'A-ABC', name: 'abc', pv: 6754,uv: 43232},
                { date: '2016-05-04', code: 'A-ABC', name: 'abc', pv: 6754,uv: 43232},
                { date: '2016-05-05', code: 'A-ABC', name: 'abc', pv: 6754,uv: 43232},
            ]
        };
    }
};
</script>
<style lang="scss" scoped>
.vue-grid-item {
    // background: rgba($color: #ccc, $alpha: 0.5);
    background: #27293d;
    border-radius: 5px;
    box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 10%);
}
.vue-grid-layout{
    min-height: 100% !important;
}
#content{
    // height: 100%;
    min-height: 100% !important;
}
.box{
    img{
        width: 100%;
        height: 100%;
    }
    .head{
        width: 100%;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 25px;
        box-sizing: border-box;
        padding: {
            left: 10px;
            top: 5px;
            right: 10px;
        };
        .title{
            text-align: left;
            font-size: 1.5rem;
            font-weight: 100;
            color: #fff;
            margin: 0;
        }
        .delbtn{
            font-size: 1.5rem;
            cursor: pointer;
        }
    }
    .main{
        width: 100%;
        height: calc(100% - 25px);
    }
}
</style>